<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<link rel="stylesheet" href="http://jquerymobile.com/demos/1.0b1/docs/_assets/css/jqm-docs.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<style>	
		.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
		.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
		#chat .ui-icon { background:  url(icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
		#email .ui-icon { background:  url(icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
		#login .ui-icon { background:  url(icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
		#beer .ui-icon { background:  url(icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
		#coffee .ui-icon { background:  url(icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
		#skull .ui-icon { background:  url(icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
	</style>
<body> 

<!-- Start of first page -->
<div data-role="page" id="foo" data-theme="d">

	<div data-role="header">
		<h1>Profile</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p>View internal page called <a href="#bar" data-transition="slidedown">bar</a></p>	
	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar"  class="type-interior">

	
<div data-role="header">
		<h1>Profile</h1>
		<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
	</div><!-- /header -->
	<div data-role="content">	
		<!--<p>I'm first in the source order so I'm shown as the page.</p>		
		<p><a href="#foo">Back to foo</a></p>-->	
	<div  class="content-primary"> 
           
			
			 <ul data-role="listview" data-inset="true">
			<li data-role="list-divider"  data-dividertheme="d">List views</li>
			<li><a href="loadme.html">
				<img src="http://www.dropbox.com/static/images/ipad_splash.png" />
				<h3>iBOX</h3>
				<p>iPad DropBox applicaton</p>
			</a></li>
			<li><a href="index.html">
				<img src="http://www.dropbox.com/static/images/ipad_splash.png" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
			</a></li>
</ul>

        </div>
	
          <div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="d" data-dividertheme="d" data-inset="true">

								<li data-role="list-divider">iPadian world</li>
								<li><a href="docs-pages.html">My Profile</a></li>
								<li><a href="page-template.html" data-ajax="false">My Page</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Contacts</a></li>
								<li><a href="docs-transitions.html">Messages</a></li>
								<li><a href="docs-dialogs.html">Notifications</a></li>
								

							</ul>
					</div>
					
        </div><!-- end content-secondary -->    
	
	</div><!-- /content -->
<div data-role="footer" data-position="fixed">
		<div data-role="navbar">
		<ul>
			<li><a href="#" id="chat" data-icon="custom">Chat</a></li>
			<li><a href="#" id="email" data-icon="custom">Email</a></li>
			<li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
		</ul>
	</div><!-- /navbar -->
	</div><!-- /footer -->
	
</div><!-- /page -->
</body
</html>
